<template>
	<view class="identity-number-expired-container">
		<scroll-view
			class="scroll-view"
			scroll-y
			:show-scrollbar="false"
			enhanced
			scroll-with-animation
			enable-passive
			fast-deceleration
			:bounces="false"
			refresher-enabled
			enable-flex
			:refresher-triggered="isPullRefresh"
			@refresherrefresh="refreshList"
			@scrolltolower="getPersonList"
		>
			<view class="identity-number-expired-list" v-if="personList.length != 0">
				<view class="identity-number-expired-item" v-for="(item, index) in personList" :key="item.rosterUuid" @tap="toRosterDetail(item)">
					<view class="identity-number-expired-item-top">
						<image :src="imgShow(item.avatar)" class="identity-number-expired-item-avatar"></image>
						<text class="identity-number-expired-item-name">{{ item.name }}</text>
						<text class="identity-number-expired-work-type-tag">{{ item.worktypeName }}</text>
						<view class="identity-number-expired-info-right">
							<text>{{ item.age }}岁</text>
							<text class="identity-number-expired-right-arrow"></text>
						</view>
					</view>
					<view class="identity-number-expired-project-name">{{ item.projectName }}</view>
					<view class="identity-number-expired-expired-time">有效期：{{ item.effectiveTerm }}</view>
				</view>
			</view>
			<noData v-else></noData>
		</scroll-view>
	</view>
</template>

<script>
import { common } from '@/pagesA/utils/common.js';
import noData from '@/pagesA/components/common/no-data/no-data.vue';
const app = getApp();
export default {
	components: {
		noData
	},
	props: ['projectUuid'],
	data() {
		return {
			personList: [],
			isPullRefresh: false,
			pageNum: 1,
			pageSize: 20,
			noMore: false
		};
	},
	methods: {
		imgShow(url) {
			return common.commonMethods.imgShow(url);
		},
		refreshList() {
			this.pageNum = 1;
			this.noMore = false;
			this.isPullRefresh = true;
			this.personList = [];
			this.getPersonList();
		},
		getPersonList() {
			if (this.noMore) {
				return;
			}
			let params = {
				projectUuid: this.projectUuid,
				pageNum: this.pageNum,
				pageSize: this.pageSize
			};
			if (!params.projectUuid) {
				delete params.projectUuid;
			}
			common.apis.projectSurvey.identityExpireListPage(params).then(
				(res) => {
					let personList = res.data;
					this.personList = this.personList.concat(personList);
					this.pageNum = this.pageNum += 1;
					this.isPullRefresh = false;
					this.noMore = personList.length < this.pageSize;
				},
				(err) => {
					this.isPullRefresh = false;
					this.noMore = false;
				}
			);
		},
		toRosterDetail(item) {
			uni.navigateTo({
				url: `/pagesA/pages/roster/detail/detail?uuid=${item.rosterUuid}&projectUuid=${item.projectUuid}`
			});
		}
	}
};
</script>

<style>
.identity-number-expired-container,
.scroll-view {
	height: 100%;
}
.identity-number-expired-list {
	margin: 0 24rpx;
	padding: 24rpx 0;
}
.identity-number-expired-item {
	background: #ffffff;
	border-radius: 24rpx;
	padding: 24rpx;
	margin-bottom: 24rpx;
}
.identity-number-expired-item:last-child {
	margin-bottom: 0;
}
.identity-number-expired-item-top {
	display: flex;
	align-items: center;
}
.identity-number-expired-item-avatar {
	width: 64rpx;
	height: 64rpx;
	border-radius: 8rpx;
	flex-shrink: 0;
}
.identity-number-expired-item-name {
	font-size: 28rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 500;
	color: #1e253f;
	margin: 0 16rpx;
	word-break: break-all;
}
.identity-number-expired-work-type-tag {
	background: #eff1f6;
	border-radius: 6rpx;
	padding: 4rpx 16rpx;
	font-size: 24rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #4b5680;
}
.identity-number-expired-info-right {
	margin-left: auto;
	font-size: 28rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #4b5680;
	display: flex;
	align-items: center;
}
.identity-number-expired-right-arrow {
	width: 12rpx;
	height: 12rpx;
	border-right: 2rpx solid #767a87;
	border-bottom: 2rpx solid #767a87;
	transform: rotate(-45deg);
	margin-left: 4rpx;
}
.identity-number-expired-project-name {
	font-size: 28rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 500;
	color: #1e253f;
	margin: 24rpx 0 16rpx;
}
.identity-number-expired-expired-time {
	font-size: 28rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #ff555c;
}
</style>
